<template>
  <!-- 门店任务分配 -->
  <div :class="$style.filtterOrder">
    <FormContainer :column="4">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
        <el-form-item prop="officeCode" label="办事处" :span="24/4*2">
          <SearchSelectPicker
            url="/call-center/api/v1/mscInfo/office/ref/page"
            method="get"
            placeholder="请选择办事处"
            lable-name="name"
            value-name="code"
            :value.sync="formData.officeCode"
            multiple
            collapse-tags
            clearable
          ></SearchSelectPicker>
        </el-form-item>
        <el-form-item prop="disCode" label="经销商">
          <SearchSelectPicker
            ref="agentSelect"
            url="/call-center/api/v1/mscInfo/dealer/ref/page"
            method="get"
            placeholder="请选择经销商"
            :params="{query:{},type:0}"
            lable-name="name"
            value-name="code"
            custom-name="codeOrName"
            :value.sync="formData.disCode"
            :current-id.sync="distributorId"
            clearable
            @selectChange="disChangeHandle"
          ></SearchSelectPicker>
        </el-form-item>
        <el-form-item prop="shopCode" label="门店">
          <SearchSelectPicker
            ref="agentSelect"
            :disabled="!distributorId"
            :url="'/call-center/api/v1/mscInfo/shop/list/'+distributorId"
            method="get"
            placeholder="请选择经销商"
            lable-name="name"
            value-name="code"
            custom-name="codeOrName"
            :must-pid="true"
            :parent-id="distributorId"
            :value.sync="formData.shopCode"
            clearable
          ></SearchSelectPicker>
        </el-form-item>
        <el-form-item prop="allocationState" label="分配状态">
          <el-select v-model="formData.allocationState" placeholder="请选择分配状态" clearable>
            <el-option label="未分配" :value="0" />
            <el-option label="已分配" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item prop="customerName" label="客户姓名">
          <el-input v-model="formData.customerName" placeholder="请输入客户姓名" clearable />
        </el-form-item>
        <el-form-item prop="contactNumber" label="联系电话">
          <el-input v-model="formData.contactNumber" placeholder="请输入联系电话" clearable />
        </el-form-item>
        <el-form-item>
          <Button @click="$refs.form.resetFields()">重置</Button>
          <Button type="primary" :loading="loading" @click="queryHandle">查询</Button>
        </el-form-item>
      </el-form>
    </FormContainer>
    <ManualTemplate :list="selectedAry" :object-method="2" @refresh="refresh('onPage')"></ManualTemplate>
    <table-box
      ref="table"
      no-request
      :selected-arry="selectedAry"
      :table-config="tableConfig"
      :other-filters="otherFilters"
      @selection-change="selectionChange"
    >
      <el-table-column slot="before" type="selection" width="50" align="center"></el-table-column>
    </table-box>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import ManualTemplate from './ManualTemplate'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import { filtersRaw } from '@/utils'
import { mapState } from 'vuex'
export default {
  name: 'FiltterOrder',
  components: {
    FormContainer,
    Button,
    ManualTemplate,
    SearchSelectPicker
  },
  data() {
    return {
      loading: false,
      tempData: {
        seatsName: '',
        officeCode: []
      },
      distributorId: '',
      otherFilters: [],
      formData: {},
      formRules: {},
      tableConfig: {
        interfacePath: '/call-center/api/v1/callBackTask/offline/page',
        pageFlag: true,
        sort: 'startDate',
        order: 'desc',
        hideFuncBar: true,
        tablePage: [100, 500, 1000, 2500, 5000],
        pageSize: 100,
        // 表格字段动态配置
        setting: [
          {
            prop: 'customerName',
            label: '客户姓名'
          },
          {
            prop: 'customerPhone',
            label: '联系电话'
          },
          {
            prop: 'orderCode',
            label: '订单编号'
          },
          {
            prop: 'officeName',
            label: '办事处'
          },
          {
            prop: 'disName',
            label: '经销商'
          },
          {
            prop: 'shopName',
            label: '门店'
          },
          {
            prop: 'allocationState',
            label: '分配状态',
            formatData: val => {
              return val.allocationState === 1 ? '已分配' : '未分配'
            }
          },
          {
            prop: 'customerServiceName',
            label: '执行坐席',
            formatData: v => {
              if (v.customerService) {
                return `${v.customerServiceName}(${v.customerService})`
              } else {
                return ''
              }
            }
          }
        ]
      },
      selectedAry: []
    }
  },
  computed: {
    ...mapState({
      taskId: function(state) {
        return state.taskForm.form[this.$route.query.id] ? state.taskForm.form[this.$route.query.id].basic.id : ''
      },
      step: function(state) {
        return state.taskForm.form[this.$route.query.id] ? state.taskForm.form[this.$route.query.id].step : 1
      }
    })
  },
  methods: {
    // 查询
    queryHandle() {
      const list = []
      this.formData.taskId = this.taskId
      for (const i in this.formData) {
        if (this.formData[i] || this.formData[i] === 0) {
          if (i === 'disCode' || i === 'shopCode' || i === 'taskId' || i === 'allocationState' || i === 'contactNumber') {
            list.push(filtersRaw(i, this.formData[i], '='))
          } else if (i === 'officeCode') {
            list.push(filtersRaw(i, `[${this.formData[i].join(',')}]`, 'in'))
          } else {
            list.push(filtersRaw(i, this.formData[i], 'like'))
          }
        }
      }
      this.otherFilters = list
      this.$nextTick(() => {
        this.refresh('opCondition')
      })
    },
    refresh(type) {
      this.$refs.table.initTableData(type)
    },
    selectionChange(val) {
      this.selectedAry = val
    },
    // 经销商变化
    disChangeHandle() {
      this.$set(this.formData, 'shopCode', '')
    }
  }
}
</script>
<style lang='scss' module>
.filtterOrder{
  & tr{
    background-color: white !important;
  }
}
</style>
